<template lang="html">
  <section class="components-order_detail-qrcode">
    <div class="separate">
      <div class="circleOne"></div>
      <div class="circleList">
        <img src="../../assets/image/div_line.png" alt=""/>
      </div>
      <div class="circleTwo"></div>
    </div>
    <div class="mark" v-if="qrCode">
      <div class="img-wrap">
        <progressive-img :src="qrCode" />
      </div>
      <!-- <img src="../../assets/image/qrcode.png" alt=""/> -->
    </div>
    <div class="quickArt">
      <div class="circleThree"></div>
      <div class="qm-art">
        <h3>上课前请给导师扫描二维码</h3>
        <h3>请保持神秘，切勿泄露他人</h3>
      </div>
      <div class="circleFour"></div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    qrCode: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
$radius:15px;
$circle-size:40px;
.components-order_detail-qrcode{
  width: 100%;
  height: 363px;
  position: relative;
  border-radius: $radius;
  background: #fff;
  .separate{
    width: 100%;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    /*border:1px solid #ff0000;*/
    position:absolute;
    top:-20px;
    .circleList{
      width: 100%;
      display:flex;
      flex-direction:row;
      align-items:center;
      img{
        width: 100%;
        height: 7px;
      }
    }
    .circleOne{
      height: $circle-size;
      width: $circle-size;
      background: $common-black;
      border-radius:  20px;
      margin-left: -32px;
    }
    .circleTwo{
      height: $circle-size;
      width: $circle-size;
      background: $common-black;
      border-radius:  20px;
      margin-right: -31px;
    }
  }
  .mark{
    width: 100%;
    height: 186px;
    display: flex;
    /*flex-direction: row;*/
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: $radius;
    .img-wrap{
      height: 153px;
      width: 153px;
      img{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .quickArt{
    height: 177px;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #ff4908;
    border-radius: 0  0 $radius $radius;
    .circleThree{
      width: $circle-size;
      height: $circle-size;
      background: $common-black;
      border-radius: 20px;
      margin-left: -20px;
    }
    .qm-art{
      height: 70%;
      font-size: 21px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-weight: 100;
    }
    .circleFour{
      width: $circle-size;
      height: $circle-size;
      background: $common-black;
      border-radius: 20px;
      margin-right: -20px;
    }
  }
}
</style>
